<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component
                    :is="item.content"
                    :activeValue="activeValue"
                    v-bind="$attrs"
                    @look-detail="value => $emit('look-detail', value)"
                ></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import DaySendList from './email-send-manage/day-send-list.vue';
import HistorySendList from './email-send-manage/history-send-list.vue';

@Component({ name: 'EmailSendManage', components: { DaySendList, HistorySendList } })
export default class EmailSendManage extends Vue {
    activeValue: string = 'day-send-list';
    panes: any[] = [
        {
            label: '当日发送处理',
            name: 'day-send-list',
            content: 'daySendList',
        },
        {
            label: '历史发送记录',
            name: 'history-send-list',
            content: 'historySendList',
        },
    ];

    // @Watch('$attrs.echartParams', { deep: true })
    // async handleEchartParams() {
    //     let { name, params, isClick }: any = this.$attrs.echartParams;
    //     if (this.$attrs.activeValue === 'day-send-list' && !isClick) {
    //         console.log(name, this.$attrs.activeValue, params, 'params');
    //         this.activeValue = name[1];
    //     }
    // }
}
</script>
<style lang="scss" scoped>
/deep/ .el-tabs {
    .el-tabs__content {
        padding: 10px 0 !important;
    }
}
</style>
